import React from 'react';
import CommentList from './CommentList';

export class RefUsage extends React.Component {
  constructor() {
    super();
    // 原生dom容器
    this.inputRef = React.createRef();
    // 组件容器
    this.commentListRef = React.createRef();
  }

  // 事件处理函数
  handleClick = () => {
    console.log(this.inputRef.current);
    console.log(this.inputRef.current.value);
    // 设置元素获取焦点
    this.inputRef.current.focus();
    console.log(this.commentListRef.current);
    console.log(this.commentListRef.current.state);
  };

  render() {
    return (
      <div>
        <h1>获取原生input</h1>
        <input type={'text'} ref={this.inputRef}></input>
        <button onClick={this.handleClick}>提交submit</button>
        <hr />
        <CommentList ref={this.commentListRef} />
      </div>
    );
  }
}
